<template>
	<view class="container">
		<!-- <view class="bgc"><image src="/static/img/index/logo.png" mode="widthFix"></image></view> -->

		<view class="banner">
			<swiper class="swiper" circular :indicator-dots="true" indicator-color="rgba(255,255,255,0.5)"
				indicator-active-color="#ffffff" :autoplay="true" style="height: 512rpx;">
				<swiper-item v-for="(item, index) in banner" :key="index">
					<image style="width: 100%; height: 512rpx;" mode="scaleToFill" :src="item.image"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view v-if="token" class="guanggao" @click="toMember">
			<image src="https://feiyu.bigchun.com/gxfuban/20250712/35f508013b173a8f13d5b94b32629dac.png" mode=""></image>
		</view>
		
		<view style="min-height: 368rpx; margin-top: 20rpx;">
			<scroll-view scroll-y="true" class="order2" v-if="orderList.length > 0">
				<view class="list_item2 " v-for="(item, index) in orderList" :key="index">
					<view class="left s-flex-r-s-c flex1">
						<view class="img">
							<image src="/static/img/detail/Battery.png" mode="widthFix"></image>
						</view>
						<view class="rows">
							<view class="row">
								<text class="bold">订单编号 : </text>
								<text> {{item.order_sn}}</text>
							</view>
							<view class="row">
								<text class="bold">租借时间 : </text>
								<text> {{item.start_time_date}}</text>
							</view>
							<view class="row">
								<text class="bold">已用时长 : </text>
								<text> {{item.use_time_string}}</text>
							</view>
						</view>
					</view>
					<!-- v-if="item.is_pay" -->
					<!-- is_wakeboard_end  浮板 -->
					<!-- 状态:0=使用中,1=已还
					is_battery_end 0=使用中,1=已还 -->
					<!-- item.is_battery_end != 1 || item.is_wakeboard_end != 1 -->
					<view class="s-flex-r-s-c" style="margin-top: 16rpx;justify-content: flex-end;">
						<view class="btn1" v-if="item.is_end != 1" @click="changeBatteries(item)">换电池</view>
						<view class="btn1" v-if="item.is_end != 1" @click="getReturn(item)">归还电池</view>
						<view class="btn1" v-else @click="toPay(item.order_sn)">去支付</view>
					</view>
				</view>
			</scroll-view>
			<view class="noData" v-if="orderList.length == 0">
				<image src="/static/img/common/nodata.png" class="image"></image>
				<view class="text">暂无订单～</view>
			</view>
		</view>

		<!-- 登录成功 -->
		<!-- <view class="scan" @click="scan" v-if="token">
			<view class="img"><image src="/static/img/index/scan.png" mode="widthFix"></image></view>
			<view class="text">扫码使用</view>
		</view> -->
		<!--   -->
		<view v-if="token" class="scan1 s-flex-r-c-c" @click="isdeposit">
			<image style="width: 44rpx;height: 44rpx;margin-right: 8rpx;" class="img" src="/static/img/index/yajin.png"
				mode="widthFix"></image>
			<view class="text" style="color: #FF4D00;font-size: 32rpx;">押金</view>
		</view>
		<view v-if="token" class="scan1 s-flex-r-c-c" @click="scan" style="margin-top: 40rpx;">
			<image class="img" src="/static/img/index/scan.png" mode="widthFix"></image>
			<view class="text">扫码使用</view>
		</view>
		<!-- 未登录 -->
		<!-- #ifdef MP-WEIXIN -->
		<button v-if="!token" @click="bindgetuserinfo" class="scan">
			<view class="img">
				<image src="/static/img/index/scan.png" mode="widthFix"></image>
			</view>
			<view class="text">扫码使用</view>
		</button>
		<!-- #endif -->
		<!-- 未登录 -->
		<!-- #ifdef MP-ALIPAY -->
		<button v-if="!token" @click="bindAuthorizeinfo" @error="onAuthError" class="scan">
			<view class="img">
				<image src="/static/img/index/scan.png" mode="widthFix"></image>
			</view>
			<view class="text">扫码使用</view>
		</button>
		<!-- #endif -->

		<view class="rule">
			<!-- <view class="valuation" @click="payscore">支付分</view> -->
			<view class="valuation" @click="calculation">温馨提示</view>
			<view class="" @click="tel">服务热线：{{ phone }}</view>
			<!-- #ifdef MP-ALIPAY -->
			<view class="clear" @click="clear">清除缓存</view>
			<!-- #endif -->
		</view>

		<!-- <view class="mask" v-if="is_hold_pay == '1'">
			<view class="pay">
				<image src="/static/img/index/close.png" mode="widthFix" @click="close"></image>
				<view class="tit">
					温馨提示
				</view>
				<view class="con">
					您有一笔订单尚未支付~
				</view>
				<view class="btn">
					<button type="default" class="exit" @click="close">取消</button>
					<button type="default" class="sub" @click="submit">支付</button>
				</view>
			</view>
		</view> -->

		<!-- <view class="mask" v-if="tackout">
			<view class="pay">
				<image src="/static/img/index/close.png" mode="widthFix" @click="close"></image>
				<view class="tit">
					温馨提示
				</view>
				<view class="con">
					确定取用电池么？
				</view>
				<view class="btn">
					<button type="default" class="exit" @click="close">取消</button>
					<button type="default" class="sub" @click="takeOut">取出</button>
				</view>
			</view>
		</view> -->
		<!-- 未登录提示框 -->
		<view class="mask" v-if="false">
			<view class="login">
				<view class="bgc">
					<image class="bgc_img" src="/static/img/index/login-bgc.png" mode="widthFix"></image>
					<image class="img_login" src="/static/img/index/login.png" mode="widthFix"></image>
				</view>
				<view class="btn_login">
					<view class="tit">您还没有登录</view>
					<view class="tips">登录即刻开启快乐生活</view>
				</view>
			</view>
		</view>
		<view class="mask" v-if="error">
			<view class="pay">
				<view class="tit">温馨提示</view>
				<view class="con">{{ msg }}</view>
				<view class="button"><button type="default" class="exit" @click="close">确定</button></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		isdeposit,
		ment,
		getUserInfo,
		getBattery,
		wxLogin,
		payList,
		backBattery,
		apilyLogin,
		wxScorePay
	} from '../../api/api.js';
	export default {
		data() {
			return {
				// title: 'Hello'
				// 是否存在未支付定金
				is_hold_pay: 0,
				// 是否支付押金
				is_deposit: 0,
				error: false,
				msg: '',
				// 订单号
				order_sn: '',
				order: false,
				avator: '',
				tackout: false,
				code: '',
				token: '',
				orderList: [
					// {
					// 	order:"O00010111111223",
					// 	startTime:"2024-07-11 18:04:13",
					// 	useTime:"1小时 5分钟"
					// }
				],
				phone: '',
				intervalPay: '',
				wxpay: [],
				banner: []
			};
		},
		onShow() {
			this.token = uni.getStorageSync('token');
			if (this.token) {
				this.getInfo();
				this.getPayList();
				// this.getOrder()
				// 五秒钟查询一次状态
				clearInterval(this.intervalPay);
				this.intervalPay = setInterval(() => {
					this.getPayList();
				}, 5000);
			}else{
				this.avator = '/static/img/index/avtor.png';
			}
			
			this.getMent();
		},
		onHide() {
			if (this.intervalPay) {
				clearInterval(this.intervalPay);
			}
		},
		destroyed() {
			if (this.intervalPay) {
				clearInterval(this.intervalPay);
			}
		},
		methods: {
			bindgetuserinfo() {
				uni.getUserProfile({
					desc: '正在获取',
					success: info => {
						// 获取code
						uni.login({
							provider: 'weixin',
							success: res => {
								wxLogin({
									rawData: info.rawData,
									code: res.code,
									iv: info.iv
								}).then(res => {
									if (res.code == 1) {
										uni.showToast({
											icon: 'none',
											title: '授权成功'
										});
										this.isLogin = true;
										uni.setStorageSync('user', res.data.userInfo);
										uni.setStorageSync('token', res.data.userInfo
											.token);
										this.token = res.data.userInfo.token;
										this.getInfo();
										clearInterval(this.intervalPay);
										this.intervalPay = setInterval(() => {
											this.getPayList();
										}, 5000);
										// this.getOrder()
									}
								});
							}
						});
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			bindAuthorizeinfo() {
				my.getAuthCode({
					scopes: ['auth_user'],
					success: res => {
						apilyLogin({
							authCode: res.authCode
						}).then(res => {
							if (res.code == 1) {
								uni.showToast({
									icon: 'none',
									title: '授权成功'
								});
								this.isLogin = true;
								uni.setStorageSync('user', res.data.userinfo);
								uni.setStorageSync('token', res.data.userinfo.token);
								this.token = res.data.userinfo.token;
								this.getInfo();
								// this.getOrder()
							}
						});
					}
				});
			},
			onAuthError() {
				// console.log('取消授权')
			},
			clear() {
				uni.clearStorageSync();
				uni.redirectTo({
					url: '/pages/index/index'
				});
			},
			getInfo() {
				getUserInfo().then(res => {
					this.avator = res.data.avatar;
					uni.setStorageSync('user', res.data);
				});
			},
			close() {
				this.error = false;
				this.getPayList();
			},
			getMent() {
				ment().then(res => {
					this.phone = res.data.local_phone;
					this.banner = res.data.banner;
					uni.setStorageSync('config', res.data);
				});
			},
			scan() {
				if (!this.token) {
					return;
				}
				let that = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						let code = res.result;
						let obj = {};
						if (code.indexOf('?') != -1) {
							let index = code.indexOf('?');
							code = code.substring(index + 1, code.length);
							code = code.split('&');
							code.forEach(v => {
								let arr = v.split('=');
								obj[arr[0]] = arr[1];
							});
							that.code = obj.code;
						}
						if (!that.code) {
							uni.showModal({
								title: '提示',
								content: '请扫描设备二维码',
								showCancel: false,
								success: function(res) {}
							});
							return;
						}
						uni.navigateTo({
							url: '/pages/leaseEquip/leaseEquip?rcode=' + that.code
						});
					},
					fail: (err) => {
						// uni.showModal({
						// 	title: "扫码错误",
						// 	content: JSON.stringify(err),
						// 	showCancel: false
						// })
					}
				});
			},
			toDetail(order_sn) {
				uni.navigateTo({
					url: '/pages/detail/detail?order_sn=' + order_sn
				});
			},
			getPayList() {
				payList().then(res => {
					if (res.data.length == 0) {
						this.order = false;
						this.orderList = [];
					} else {
						this.order = true;
						this.orderList = res.data;
					}
				})
			},
			toPay(order_sn) {
				// pages/detail/detail
				uni.navigateTo({
					url: '/pages/detail/detail?order_sn=' + order_sn
				});
			},
			changeBatteries(item) {
				uni.navigateTo({
					url: '/pages/changeBatteries/changeBatteries?order_id=' + item.order_id + '&device_id=' + item
						.borrow_b_device_id
				})
			},
			getReturn(item) {
				uni.navigateTo({
					url: '/pages/returnBoard/returnBoard?order_id=' + item.order_id
				})
				// let that = this;
				// uni.showModal({
				// 	title: '提示',
				// 	content: '请在柜子上面操作，点击还操作进行归还！',
				// 	showCancel: false,
				// 	success(res) {
				// 		if (res.confirm) {
				// 			// backBattery({
				// 			// 	order_id: order_id
				// 			// }).then(res => {
				// 			// 	if (res.code == 1) {
				// 			// 		that.error = true;
				// 			// 		that.msg = '柜门已打开，请归还';
				// 			// 		// uni.showToast({
				// 			// 		// 	icon: 'none',
				// 			// 		// 	title: '柜门已打开，请归还'
				// 			// 		// })
				// 			// 		// setTimeout(function() {
				// 			// 		// 	this.msg = '柜门已打开，请归还'
				// 			// 		// }, 2000)
				// 			// 		// setTimeout(function() {
				// 			// 		// 	that.getPayList()
				// 			// 		// }, 500)
				// 			// 	}
				// 			// });
				// 		} else if (res.cancel) {
				// 			// console.log('用户点击取消');
				// 		}
				// 	}
				// });
			},

			takeOut() {
				getBattery({
					code: this.code
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					this.tackout = false;
					let that = this;
					setTimeout(function() {
						that.getOrder();
					}, 500);
				});
			},
			getOrder() {
				isdeposit().then(res => {
					this.is_hold_pay = res.data.is_hold_pay;
					this.is_deposit = res.data.is_deposit;
					this.order_sn = res.data.order_sn;
				});
			},
			submit() {
				uni.navigateTo({
					url: '/pages/detail/detail?order_sn=' + this.order_sn
				});
			},
			calculation() {
				uni.navigateTo({
					url: '/pages/ment/tip'
				});
			},
			payscore() {
				console.log('qqq=============');
				if (wx.openBusinessView) {
					wxScorePay().then(res => {
						if (res.data.length == 0) {
							this.wxpay = [];
						} else {
							console.log('ok========openBusinessView=  ====');
							//console.log(res);
							this.wxpay = res.data;
							console.log(this.wxpay.package);
							console.log(this.wxpay.timestamp);
							console.log(this.wxpay.nonce_str);
							console.log(this.wxpay.sign_type);
							console.log(this.wxpay.sign);

							wx.openBusinessView({
								// businessType: 'wxpayScoreEnable',
								businessType: 'wxpayScoreUse',
								extraData: {
									mch_id: '1606872736',
									//service_id: '00002009000000162685076639063381',
									//out_request_no: '12KHDFE12432521632281892',
									package: this.wxpay.package,
									timestamp: this.wxpay.timestamp,
									// timestamp: new Date().getTime(),
									nonce_str: this.wxpay.nonce_str,
									sign_type: this.wxpay.sign_type,
									sign: this.wxpay.sign
								},
								envVersion: 'release',
								success() {
									//dosomething
								},
								fail() {
									//dosomething
								},
								complete() {
									//dosomething
								}
							});
						}
					});

					console.log('ok====end==========');
				} else {
					console.log('ssssssssssss');

					//引导用户升级微信版本
				}
			},
			toUser() {
				if (!this.token) {
					uni.navigateTo({
						url: '/pages/login/login'
					});
					return;
				}

				uni.navigateTo({
					url: '/pages/user/user'
				});
			},
			tel() {
				uni.makePhoneCall({
					phoneNumber: this.phone
				});
			},
			toMember() {
				uni.switchTab({
					url:'/pages/active/numCard'
				})
			},
			isdeposit() {
				isdeposit().then(res => {
					let is_deposit = res.data.is_deposit;
					// 如果支付了押金，进入押金退回页面
					if (is_deposit == 1) {
						uni.navigateTo({
							url: '/pages/user/detail/drawal'
						})
					}
					// 如果没有支付押金，进入押金支付页面
					else if (is_deposit == 0) {
						uni.showToast({
							title: '未支付押金',
							icon: 'none'
						})
						// uni.navigateTo({
						// 	url: '/pages/deposit/deposit'
						// })
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.noData {
		padding: 0 30rpx;
		margin: 0 auto;
		text-align: center;

		.image {
			width: 320rpx;
			height: 320rpx;
		}

		.text {
			font-size: 28rpx;
			color: #B0B0B0;
		}
	}

	.container {
		width: 100%;
		height: 100%;

		.bgc {
			background-image: url(../../static/img/index/background.png);
			background-size: 100% 100%;
			width: 100%;
			height: 550upx;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 0;

			image {
				width: 300upx;
				height: 300upx;
			}
		}

		.scan {
			width: 220upx;
			height: 220upx;
			background-color: #ffffff;
			box-shadow: 0upx 0upx 68upx 0upx rgba(129, 158, 174, 0.21);
			border-radius: 50%;
			position: absolute;
			top: 450upx;
			left: calc(50% - 110upx);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 0;

			.img {
				width: 50upx;
				height: 50upx;
				margin-bottom: 20upx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				width: 100%;
				text-align: center;
				font-size: 32upx;
				color: #009af2;
			}
		}

		.scan1 {
			width: 690rpx;
			height: 100rpx;
			// line-height: 100rpx;
			background-color: #ffffff;
			// box-shadow: 0upx 0upx 68upx 0upx rgba(129, 158, 174, 0.21);
			// border-radius: 8upx;
			box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			// position: absolute;
			// bottom: 140rpx;
			// left: 30rpx;
			padding: 0;
			margin: 44rpx auto 0;

			.img {
				width: 32upx;
				height: 32upx;
				margin-right: 20rpx;
			}

			.text {
				text-align: center;
				font-size: 32upx;
				color: #009af2;
			}
		}

		.scan::after {
			border: 0;
		}

		.user {
			position: absolute;
			width: 262upx;
			height: 90upx;
			background: rgba($color: #ffffff, $alpha: 0.14);
			border-radius: 45upx 0upx 0upx 45upx;
			top: 40upx;
			right: 0;
			color: #ffffff;
			display: flex;
			align-items: center;

			image {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
				margin: 0 30upx 0 15upx;
			}

			text {
				// margin-left: 30upx;
			}
		}

		.user_isLogin {
			position: absolute;
			width: 262upx;
			height: 90upx;
			background: rgba($color: #ffffff, $alpha: 0.14);
			border-radius: 45upx 0upx 0upx 45upx;
			top: 40upx;
			right: 0;
			color: #ffffff;
			display: flex;
			align-items: center;
			padding: 0;
			border: 0;

			image {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
				margin: 0 30upx 0 15upx;
			}

			text {
				// width: 120upx;
				// height: 80upx;
				font-size: 32upx;
			}
		}

		.user_isLogin::after {
			border: 0;
		}

		.rule {
			width: 100%;
			// position: fixed;
			// margin-bottom: 30upx;
			// margin-top: 30upx;
			padding: 30upx 0;
			text-align: center;
			color: #999999;
			font-size: 26upx;

			.valuation {
				color: #3eb9ff;
				font-size: 28upx;
				margin-bottom: 12upx;
			}

			.clear {
				width: 90%;
				height: 90upx;
				background-color: #3eb9ff;
				border-radius: 45upx;
				margin: 0 auto;
				text-align: center;
				color: #ffffff;
				line-height: 90upx;
				font-size: 32upx;
			}
		}

		.order2 {
			width: 690upx;
			margin: 0 auto;
			padding: 20rpx;
			box-sizing: border-box;
			background: #ffffff;
			position: relative;
			box-shadow: 0upx 0upx 68upx 0upx rgba(129, 158, 174, 0.21);
			border-radius: 20upx 16rpx;

			.list_item2 {
				background: #F1F1F1;
				width: 100%;
				margin: 0rpx auto 20rpx;
				padding: 30rpx 10rpx;

				.img {
					width: 80upx;
					height: 80upx;
					background-color: #d8efff;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 10upx;

					image {
						width: 50upx;
					}
				}

				.rows {
					font-size: 28rpx;
				}

				.btn1 {
					padding: 0 20rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: 8rpx;
					background-color: #44B8FC;
					color: #fff;
					font-size: 30rpx;
					margin-right: 20rpx;
				}
			}
		}

		.order {
			// width: 580upx;
			width: 620upx;
			height: 300upx;
			margin: 150upx auto 0;
			padding: 10upx 30upx 30upx;
			background: #ffffff;
			position: relative;
			box-shadow: 0upx 0upx 68upx 0upx rgba(129, 158, 174, 0.21);
			border-radius: 20upx;

			.list_item {
				width: 100%;
				height: 150upx;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1upx solid #f7f7f7;

				.left {
					display: flex;
					align-items: center;

					.img {
						width: 80upx;
						height: 80upx;
						background-color: #d8efff;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20upx;

						image {
							width: 50upx;
						}
					}

					.item_l {
						height: 80%;
						display: flex;
						font-size: 28upx;
						flex-direction: column;
						justify-content: space-around;

						.time {
							color: #999999;
							font-size: 24upx;
						}

						.tip {
							color: #999999;
							font-size: 24upx;
							margin-right: 10upx;
						}
					}
				}

				.item_r {
					width: 130upx;
					height: 54upx;
					border-radius: 27px;
					font-size: 26upx;
					font-weight: 500;
					text-align: center;
					line-height: 54upx;
				}

				.huan {
					background-color: #f5f5f5;
					color: #666666;
				}

				.toPay {
					background-color: #d8efff;
					color: #3eb9ff;
				}
			}
		}

		.mask {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			z-index: 99;
			background: rgba($color: #000000, $alpha: 0.3);
			display: flex;
			align-items: center;
			justify-content: center;

			.pay {
				width: 580upx;
				height: 340upx;
				padding: 10upx 30upx;
				background: #ffffff;
				border-radius: 12px;
				position: relative;

				image {
					width: 30upx;
					height: 30upx;
					position: absolute;
					top: 20upx;
					left: 30upx;
				}

				.tit {
					width: 100%;
					text-align: center;
					margin: 50upx auto 30upx;
				}

				.con {
					width: 100%;
					text-align: center;
				}

				.button {
					margin-top: 45upx;
					display: flex;
					justify-content: center;

					button {
						width: 200upx;
						height: 88upx;
						line-height: 88upx;
						background: #3eb9ff;
						border-radius: 44upx;
						border: 1upx solid #f2f2f2;
						color: #fff;
					}
				}

				.btn {
					margin-top: 45upx;
					display: flex;

					button {
						width: 200upx;
						height: 88upx;
						background: #ffffff;
						border-radius: 44upx;
						border: 1upx solid #f2f2f2;
						color: #666666;
					}

					.sub {
						width: 200upx;
						height: 88upx;
						background: #3eb9ff;
						border-radius: 44upx;
						color: #ffffff;
					}
				}
			}
		

		
		}
		
		.guanggao{
			image{
				width: 92%;
				height: 100px;
				margin: 30rpx auto;
				display: block;
			}
		}
		
		.login {
			width: 600upx;
			height: 625upx;
			background: #ffffff;
			border-radius: 20upx;

			.bgc {
				width: 100%;
				height: 285upx;
				position: relative;

				.bgc_img {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}

				.img_login {
					width: 116upx;
					height: 134upx;
					position: absolute;
					top: calc(50% - 67upx);
					left: calc(50% - 58upx);
				}
			}

			.btn_login {
				width: 90%;
				margin: 30upx auto 0;
				text-align: center;

				.tit {
					font-size: 34upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 34upx;
					margin-top: 50upx;
				}

				.tips {
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 26upx;
					margin: 30upx 0;
				}

				button {
					width: 100%;
					height: 80upx;
					background: #3199ff;
					box-shadow: 0upx 8upx 12upx 6upx rgba(0, 101, 196, 0.16);
					border-radius: 40upx;
					color: #ffffff;
					font-size: 32upx;
					line-height: 80upx;
				}

				.exit {
					margin: 30upx 0;
				}
			}
		}
	
	}
</style>